// 嵌套语法
// Less允许我们按照html的嵌套结构来书写选择器
// & 表示引用父选择器
body{
    .wrap{
        width: 1000px;
        margin: 50px auto 0;
        .header{
            height: 60px;
            background-color: lightblue;
        }
        .content{
            height: 150px;
            overflow: hidden;
            .left{
                float: left;
                width: 200px;
                height: 100%;
                background-color: aqua;
                span{
                    color: red;
                    &:first-child{
                        color: yellow;
                    }
                }
                // span:first-child{
                //     color: yellow;
                // }
            }
            .right{
                float: left;
                width: 800px;
                height: 100%;
                background-color: lightgreen;
                p{
                    color: beige;
                }
            }
        }
        .footer{
            height: 100px;
            background-color: #ccc;
            a{
                font-size: 20px;
                color: blueviolet;
                &:hover{
                    color: red;
                }
            }
        }
    }

    .container{
        width: 1000px;
        margin: 50px auto 0;
        // .container-header{
        &-header{
            height: 50px;
            background-color: #ccc;
            // .container-header-left{
            &-left{
                float: left;
                width: 100px;
                height: 50px;
                background-color: lightblue;
            }
            // .container-header-right{
            &-right{
                float: right;
                width: 100px;
                height: 50px;
                background-color: lightgreen;
            }
        }
    }
}
